import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import Home1 from '../images/tabbar/home_1.png'
import Home2 from '../images/tabbar/home_2.png'
import Fast from '../images/tabbar/fast.png'
import My1 from '../images/tabbar/my_1.png'
import My2 from '../images/tabbar/my_2.png'
import "./less/Nav.less"

const useStyles = makeStyles({
    root: {
        width: '100%',
        position: 'fixed',
        left: 0,
        bottom: 0
    },
});

export default function Nav(props) {
    const classes = useStyles();

    let initVal = 0;    // 定义导航栏初始值
    let pathname = props.history.location.pathname;
    switch (pathname) {
        case "/home":
            initVal = 0;
            break;
        case "/fast":
            initVal = 1;
            break;
        case "/user":
            initVal = 2;
            break;
        default:
            initVal = 0;
            break;
    }

    // 根据路由地址决定value的初始值
    const [value, setValue] = React.useState(initVal);

    return (
        <BottomNavigation
            value={value}
            onChange={(event, newValue) => {
                setValue(newValue); // 异步
                switch (newValue) {
                    case 0: // 跳转首页
                        props.history.push('/home');
                        break;
                    case 1: // 快速刷题
                        props.history.push('/fast');
                        break;
                    case 2: // 用户页
                        props.history.push('/user');
                        break;
                    default:
                        break;
                }
            }}
            showLabels
            className={classes.root}
            style={{display: pathname==="/home" || pathname==="/fast" || pathname==="/user" ? 'flex' : 'none'}}
        >
            <BottomNavigationAction label="首页" icon={<img className="home_icon" alt="" src={value===0 ? Home1 : Home2} />} />
            <BottomNavigationAction label="快速刷题" icon={<img className="fast_icon" alt="" src={value===1 ? Fast : Fast} />} />
            <BottomNavigationAction label="我的" icon={<img className="my_icon" src={value===2 ? My1 : My2} alt="" />} />
        </BottomNavigation>
    );
}


